<template>
  <div class="wrapper" ref="wrapper">
    <headers text="黑马新闻">
      <template #left>
        <span
          @click="$router.go(-1)"
          class="fanhui"
          :class="['iconfont', 'icon-jiantou2']"
          >返回</span
        >
      </template>
      <template #right>
        <span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
      </template>
    </headers>
    <div class="Newsgoodlist">
      <div class="news">
        <h2 v-if="goodslist">{{ goodslist.title }}</h2>
        <p class="classification">
          {{ goodslist.add_time }}
          <span>{{ goodslist.click }}次浏览 <span>分类：经济民生</span></span>
        </p>

        <div class="texts" v-html="goodslist.content"></div>
      </div>
    </div>
    <comment :commentList="comments" @publishComment="compt"></comment>
    <footers></footers>
  </div>
</template>

<script>
import headers from "../../components/headers.vue";
import footers from "../../components/footers.vue";
import {
  graphicDetails,
  getscomments,
  getsubmitComments,
} from "../../apis/graphic";
import comment from "../../components/comment.vue";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  components: { footers, headers, comment },
  data() {
    return {
      goodslist: [],
      comments: [],
      pageindex: 1,
    };
  },

  async mounted() {
    let id = this.$route.params.id;
    this.goodslist = (await graphicDetails(id)).data.message[0];
    //  console.log(this.goodslist);
    this.init();
    // console.log(this.comments);
  },

  methods: {
    async init() {
      let id = this.$route.params.id;
      this.comments = (
        await getscomments(id, { pageindex: this.pageindex })
      ).data.message;
      // console.log(this.comments);
    },

    async compt(value) {
      // console.log(value);
      let res = await getsubmitComments(this.$route.params.id, {
        content: value,
      });
      Toast(res.data.message);
      this.init();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("//at.alicdn.com/t/font_2621049_d43meoif9r.css");
.wrapper {
  height: 100%;
}
.com {
  padding-top: 40px;
}
.Newsgoodlist {
  height: calc(100% - 100px);
  padding-top: 20px;
  width: 100%;
  overflow-y: auto;
  .news {
    padding: 0 10px;
    height: 95px;
  }
  h2 {
    color: #017ac4;
    font-size: 19px;
  }
  .classification {
    padding-top: 10px;
    color: #a9a0a2;
    font-size: 12px;
  }
}
.texts {
  padding-top: 20px;
}
body {
  padding-bottom: 60px;
}
</style>